<%@ include file="/WEB-INF/jspf/taglib.jspf" %>
<%-- Set language based on user's choice --%>
<c:if test="${!empty language}">
    <fmt:setLocale value="${language}" scope="session" />
</c:if>
<!--Form Function-->
<script type="text/javascript">
    // pre-submit callback
    function showRequest(formData, jqForm, options) {
        //var queryString = $.param(formData);
        return true;
    }

    // post-submit callback
    function showResponse(responseText, statusText, xhr, $form)  {
        BindJsonToHtml(responseText);
    }
</script>
<!--End Form Function-->

<!--Page Load-->
<script type="text/javascript" >
    $(document).ready(function() {
        /**
         * LoadData
         */
        $("#formRegister").find("input, select, button, textarea").uniform({selectClass: 'selector full_width width-100'});
        //Validate Form
        $("#formRegister").validationEngine('attach');
        $('#formRegister').ajaxForm({
            url: '<%=request.getContextPath()%>/SEC/Register/doRegister',
            type: 'POST',
            dataType:  'json',
            beforeSubmit:  showRequest,  // pre-submit callback
            success:       showResponse  // post-submit callback
        });
        /**
         * End LoadData
         */

        /**
         * Bind Tab&Dialog
         */
        $("#dialogSecRegister_Success").dialog({
            title: "",
            dialogClass: 'medhub_dialog',
            autoOpen: false,
            modal: true,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                    $( '#dialogSecLogin_Register' ).dialog( "close" );
                }
            }
        });
        $("#dialogSecRegister_Error").dialog({
            title: "",
            dialogClass: 'medhub_dialog',
            autoOpen: false,
            modal: true,
            buttons: {
                Ok: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
        /**
         * End Bind Tab&Dialog
         */

        /**
         * Bind Event
         */
             
        /**
         * End Bind Event
         */
    });
</script>
<!--End Page Load-->

<form id="formRegister" class="form clearfix">
    <table class="width-100">
        <tr>
            <td colspan="2">
                <em>
                    <label id="lblUsername" class="grey" for="txtUsername"><fmt:message key="Username"/>:</label>
                </em>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="p1" id="wrapUsername" >
                    <input type="text" name="txtUsername" id="txtUsername" class="width-90 validate[required, minSize[8]]"  value="" />
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <em>
                    <label id="lblPassword" class="grey" for="txtPassword"><fmt:message key="Password"/>:</label>
                </em>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="p1" id="wrapPassword" >
                    <input type="password" name="txtPassword" id="txtPassword" class="width-90 validate[required, minSize[8], maxSize[20]]"  />
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <em>
                    <label id="lblConfirmPassword" class="grey" for="txtConfirmPassword">Confirm Password:</label>
                </em>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="p1" id="wrapPassword" >
                    <input type="password" name="txtConfirmPassword" id="txtConfirmPassword" class="width-90 validate[required, equal[txtPassword]]"  />
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <em>
                    <label id="lblEmail" class="grey" for="txtEmail"><fmt:message key="Email"/>:</label>
                </em>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="p1" id="wrapEmail" >
                    <input type="text" name="txtEmail" id="txtEmail" class="width-90 validate[required, custom[email]]"  />
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div class="p1" id="wrapButton">
                    <input type="submit" name="btnSubmitRegister" id="btnSubmitRegister" class="bt_register" value="Register" />
                    <small>
                        <fmt:message key="Detailregister"/>
                    </small>
                </div>
            </td>
        </tr>
    </table>
</form>

<div id="dialog_panel">
    <div id="dialogSecRegister_Success" style="display:none;">

    </div>
    <div id="dialogSecRegister_Error" style="display:none;">

    </div>
</div>